//

import router from "./src/router";

// 创建一个工程化的项目

// 何为工程化项目?
// 01: 每一个页面都是一个.vue文件,该文件中有自己的css html js
// 02: 使用模块化语法实现导入导出. 减少代码复用 es模块化语法 import, export, export default,
// 03: 结合了打包工具 vite 可以实现项目的打包,以及配置一个本地服务器(node 使用http 模块)
// 04: 打包时进行代码压缩 ,使用vite 减少代码体积,优化项目

// 创建一个vue3项目
// npm init vue@latest
// cd 项目名称
// npm i 根据项目根目录的package.json 文件中记录的依赖进行下载项目依赖,
// npm run dev 在项目根目录执行命名 运行本地开发服务器, 运行项目


//项目的目录介绍
// node_modules 项目需要的所有的依赖  vue.js  .....
// public 项目的公共目录 里面存了该项目的页签图标
// src 目录, 开发者主要操作的目录,
// assets: 存放的是该项目的所有的静态资源文件 包括 css js img audio  video 等等
// components : 存放项目中的所有的功能性的组件的 例如: header ,swiper 轮播组件 footer 组件 分页组件...
// App.vue: 项目的根组件 ,后期所有的页面组件都放在根组件中展示
// main.js : 项目的入口文件.也叫做打包的入口文件, 项目运行一开始执行的文件

//.eslintrc 做代码规范监测配置的
// package.json, 记录项目的依赖个执行脚本
// vite.config.js 由于vite 已经进行了一个初始化的配置,通过该文件可以进行vite的二次配置



//路由的概念
// 服务器端的路由:
// 指的是 根据不同的请求的url + methods  然后匹配到后端定义的接口,然后后端给出响应

// 前端的路由(单页应用的路由)
// 监听到当前浏览器的地址栏的变化, 通过 history历史栈记录的变化 和 url 中hash 值的变化,监听其变化,
// 使用 popstate 事件和 hashchange 事件 , 监听路由的改变,实现切换不同的组件.

// 注意:
// 以后在开发中
// vue2 +vue-router3.x + vuex3.x 全家桶 +构建工具 webopack
// vue3 +vue-router4.x +vuex 4.x 全家桶 +构建工具 vite


// 路由的hash 模式
// 根据url 中不同的hash 值 #hash值 如 #/home, #/category,...
// 在app.vue中渲染不同的组件

//创建路由步骤
// 01: 首先安装 npm i vue-router@4
// 02: 在src 下 创建一个router的文件夹,在该文件夹中新建index.js ,在该js 文件中定义路由规则
// 03: 定义路由规则数组,每一个path 都对应一个component
// 04: 创建路由对象 createRouter({指定路由模式,路由规则数组})
// 05: 导出路由对象.然后在main.js 入口文件中导入,并挂载到根实例,这样全局都能使用路由对象了
// 06: 在app.vue中执行路由对应的组件存放的位置 (坑) <router-view></router-view>


// 面试题?
// 请说出 this.$router 和 this.$route 的区别?
// this.$router 表示就是创建处理的router实例对象,也是绑定app.use(router) 此处的router参数===this.$router
// 通过this.$router 实现路由跳转(编程式导航跳转页面)
// this.$route 表示当前的路由对象,包含了当前的路由信息参数,可以获取参数 ,当前路由地址等的


//路由的配置
// 配置二级路由需要注意:
// 01: 二级路由使用children :[] 属性配置.然后每一个二级路径中path不能使用 '/',否则变成了根路径
// 02: 如果一级路由跳转时,使用name 路由名跳转,则默认不显示该一级路由下的二级路由,解决方法:使用 path方法跳转
// 03: 默认的二级路由为 path:'',
// 04: 二级路由对应的坑应该在一级组件中设置route-view


// 路由参数映射到组件
// 将路由上的参数通过props 映射到组件的props 属性上, 这样就不需要通过this.$route 方式获取参数了
// 注意: 该方式只针对 restful分风格形式


// 设置history 路由模式
// 只需要修改 history选项
// 第一种: hash 模式
// 第二种: h5模式

// 面试题:区别?
// 01: url 地址栏的区别 hash历史模式 有#, h5历史模式没有#

// 02: 原理不一样 :
// hash 模式是通过监听url中的hash 值的改变, 通过 window.onhashchange 事件, 实现显示不同的组件
// h5 模式: 通过监听history 历史栈的变化,向历史栈中添加历史记录,使用window.onpopstate 事件history 变化,
// 从而实现显示不同的组件

// 03: hash 不需要服务器端做配置,直接上线, 而 h5模式上线后刷新页面 出现404 ,这时候需要后端人员做服务器重定向配置即可


// 全局前置守卫
// 定义: 在路由跳转到下一个路由前,触发的首位函数, 全局表示只要项目中有路由跳转,都会触发全局前置守卫函数
// router.beforeEach((to,from){return})
// 如果没有return 或return 为true , 表示所有的路由跳转都放行,相当与没有守卫
// 当return 为false, 表示取消路由跳转,跳不过去
// return返回值为新的路由路由对象 如 {path:url},或 {name:路由命名} 这样或跳转到新的路由地址

// 使用场景: 做登录的验证


// 路由元信息
// 在对应的路由对象中,设置一个meta 信息, 这样,可以通过 this.$route 获取到当前的路由信息中就包含meta 信息

// 全局后置钩子
// 表示路由已近进入到新的路由地址中后触发的一个后置的钩子函数
// router.afterEach((to, from) => {
//     // 例如: 可以进入页面后修改页面的标题
// })


// 路由独享守卫
// 只针对某一个路由起作用
// 语法: brforeEnter:(to,from )=>{ 条件判断语法}


// 组件内的守卫
// 在当组件中,有三个导航钩子函数
// 第一个: beforeRouteEnter(to,from){} ,进入到当前组件前触发,该函数中的this 为null
// 第二个: 不常用  beforeRouteUpdate(to,from)=>{} ,已经进入到当前组件中,然后当前组件的动态参数改变的时候触发, restful 参数改变时
// 触发,需要配合路由配置表中的path设置为动态参数路由, 函数中的this 指向当前组件的实例对象
// 第三个: beforeRouteLeave(to,from)=>{} 当路由离开当前组件的时候触发,函数中的this 指向当前组件的实例对象


//路由懒加载
// 根据路由显示对应的组件,切换那个路由,才加载哪一个组件,而不是首次一起加载,解决首页白屏的一种方式
